<template>
  <div class="reset-pwd">
    <back-btn style="color:#000000"></back-btn>
    <div class="reset-title">忘记密码</div>
    <van-form @submit="onSubmit">
      <van-field v-model="mobile"
                 label="手机号码"
                 placeholder="请输入手机号码"
                 :rules="[{ required: true, message: '请输入手机号码' }]" />
      <van-field v-model="code"
                 label="验证码"
                 placeholder="请输入验证码"
                 :rules="[{ required: true, message: '请填写验证码' }]">
        <template #button>
          <li class="code-btn"
              v-if="!isGetCode"
              @click="getCode">获取验证码</li>
          <van-count-down v-if="isGetCode"
                          :time="time"
                          format="ss秒"
                          @finish="isGetCode = false" />
        </template>
      </van-field>
      <van-field v-model="password"
                 type="password"
                 label="新密码"
                 placeholder="请输入密码"
                 :rules="[{ required: true, message: '请输入密码' }]" />
      <van-field v-model="repassword"
                 type="password"
                 label="确认密码"
                 placeholder="请再次输入密码"
                 :rules="[{ required: true, message: '请再次出入密码' },{validator: val=>password == val,message: '两次输入密码不一致'}]" />
      <div class="submit-div">
        <van-button round
                    block
                    native-type="submit">确定</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import BackBtn from '@/components/BackBtn'
export default {
  data () {
    return {
      mobile: '',
      code: '',
      password: '',
      repassword: '',
      isGetCode: false, // 是否获取验证码
      time: 0
    };
  },
  components: {
    BackBtn,
  },
  created () { },
  methods: {
    getCode () {
      if (!this.mobile) {
        this.$toast('请输入手机号码！')
        return
      }
      this.isGetCode = true;
      this.time = 10 * 1000
    },
    goResetPassword () {
      this.$router.push({ path: '/resetPwd' })
    },
    goRegister () {
      this.$router.push({ path: '/register' })
    },
    onSubmit () { },
  }
}

</script>
<style lang='scss' scoped>
.reset-pwd {
  @extend %wh100;
  box-sizing: border-box;
  padding: 1rem 0.65rem;
  .reset-title {
    font-size: 0.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  .van-cell {
    flex-direction: column;
    align-items: flex-start;
  }
  .code-btn {
    width: 1.3rem;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(to right, #ff6128, #ff8331);
    border-radius: 0.15rem;
    font-size: 0.18rem;
  }
  .submit-div {
    margin-top: 1.5rem;
    width: 100%;
    .van-button {
      background: linear-gradient(to right, #ff6128, #ff8331);
      color: #ffffff;
      font-size: 0.36rem;
      height: 0.9rem;
    }
  }
}
</style>